<template>
  <div class="haohuo">
    <div class="haohuo-title">探索新生活</div>
  </div>
</template>

<style lang="scss">
  .haohuo {
    padding: 15px;
    height: 225px;
    background: url("https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/5cdb1429e54bb22bba295a54ba1e3643.png") no-repeat;
    &-title {
      padding-top: 50px;
      padding-left: 20px;
      height: 90px;
      color: #fff;
      font-size: 16px;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: url("");
      &::after {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-left: 5px;
        background: url("https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/tit_arrow/sprite@2x.png") no-repeat;
        background-position-y: -16px;
        background-size: 32px 32px;
      }
    }
    &:hover {
      .haohuo-title::after {
        background-position-y: 0;
      }
    }
  }
</style>